<selectedcontent>: Das Element zur Anzeige der ausgewählten Option

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.

Das <selectedcontent>-Element HTML kann verwendet werden, um den Inhalt der aktuell ausgewählten <option> innerhalb eines geschlossenen <select>-Elements anzuzeigen.

Attribute

Das <selectedcontent>-Element enthält die globalen Attribute, diese werden jedoch im Wesentlichen ignoriert, da das Element, wenn es korrekt als Kind eines Select-Buttons verwendet wird, inert gerendert wird.

Der Select-Button und all sein Inhalt sind standardmäßig träge, so dass, wenn interaktive Kinder (zum Beispiel Links oder Buttons) darin enthalten sind, er dennoch als einzelner Button betrachtet wird, was die Interaktion betrifft.

Keine weiteren Attribute sind auf <selectedcontent> definiert.

Beschreibung

Beim Erstellen eines anpassbaren Select-Elements können Sie das <selectedcontent>-Element innerhalb eines <button>-Elements einfügen, das wiederum das erste Kind des <select>-Elements sein muss:

html

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>

  ...
</select>

<selectedcontent> enthält einen Klon des aktuell ausgewählten <option>-Elementinhalts eines <select>-Elements, erstellt mittels cloneNode().

Jeglicher nachfolgende <select>-Inhalt wird im Dropdown-Picker enthalten sein.

Wann immer das ausgewählte <option>-Element eines <select>-Elements von einer Option zur anderen wechselt, wird der Inhalt des <selectedcontent>-Elements entfernt und durch eine neue geklonte Kopie der DOM-Struktur der neu ausgewählten <option> ersetzt, die ebenfalls mittels cloneNode() erstellt wurde. Dynamische Änderungen am Inhalt des ausgewählten <option>-Elements, die nach der Erstellung des <select>-Elements vorgenommen werden, werden nicht automatisch zum <selectedcontent>-Element geklont und müssen manuell vom Entwickler aktualisiert werden.

Warnung: Insbesondere kann dies Probleme bei Websites verursachen, die populäre JavaScript-Frameworks für die Front-End-Entwicklung verwenden, wo <option>-Elemente nach ihrer Erstellung dynamisch aktualisiert werden, da diese Updates nicht zum <selectedcontent>-Element geklont werden.

Stilgebung mit CSS

Es ist nützlich, den Inhalt des aktuell ausgewählten <option>-Elements gezielt mit CSS-Stilen anzusprechen, so wie er innerhalb des Select-Buttons erscheint, ohne dass dies die Gestaltung des Inhalts beeinflusst, wie er im Picker erscheint.

Zum Beispiel können Ihre <option>-Elemente Symbole, Bilder oder sogar Videos enthalten. Dieser Inhalt könnte im Picker schön aussehen, könnte aber dazu führen, dass der Select-Button größer wird, unordentlich aussieht und das umgebende Layout beeinflusst.

Dies könnte behoben werden, indem der problematische Inhalt verborgen wird, wenn er sich innerhalb von <selectedcontent> befindet. Zum Beispiel:

css

selectedcontent img {
  display: none;
}

Hinweis: Wenn die <button>- und/oder <selectedcontent>-Elemente nicht innerhalb des <select>-Markup enthalten sind, wird der Browser den ausgewählten Optionsinhalt implizit innerhalb des Select-Buttons platzieren, aber dieses Targeting wird nicht möglich sein.

Beispiele

Sie können ein vollständiges Beispiel, das das <selectedcontent>-Element enthält, in unserem Leitfaden zu anpassbaren Select-Elementen sehen.

Technische Übersicht

Inhaltskategorien	Keine
Zulässiger Inhalt	Spiegelt den Inhalt der ausgewählten `<option>`.
Tag-Auslassung	Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Zulässige Eltern	Ein `<button>`-Element, das das erste Kind eines `<select>`-Elements ist.
Implizite ARIA-Rolle	Keine
Zulässige ARIA-Rollen	Keine
DOM-Schnittstelle	[`HTMLSelectedContentElement`](/de/docs/Web/API/HTMLSelectedContentElement)

Das <select>-Element
Das <option>-Element
Das <optgroup>-Element
Anpassbare Select-Elemente